<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="/css/my01.css">
</head>
<body>
<!--导航条-->
<div class="m-container">
    <nav class="ui segment inverted attached m-padded-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui teal header item"> L E A R N </h2>
                <a th:href="@{/system/front/learn}" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <p th:if="${user != null}" id = "username" class="m-item item m-mobile-hide"><i class="user icon"></i>[[${user.userName}]]</p>
                <a th:if="${user != null}" href="javascript:;" class="m-item item m-mobile-hide"><i class="fa fa-circle text-success"></i> 在线</a>
                <a th:if="${user != null}" th:href="@{/logout}" style="padding-left:5px;" class="m-item item m-mobile-hide"><i class="fa fa-sign-out text-danger"></i> 注销</a>
                <a th:unless="${user != null}" th:href="@{/login}" class="m-item item m-mobile-hide"><i class="user icon"></i>去登录</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon inverted transparent input m-margin-tb-tiny">
                        <!--全局搜索-->
                        <!--全局搜索-->
                        <form name="search" action="#" th:action="@{/system/front/learn}" method="POST" target="_blank">
                            <div class="ui icon inverted transparent input m-margin-tb-tiny">
                                <input type="text" name="title" placeholder="Search...." th:value="${title}">
                                <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <a href="" class="black t_menu icon ui button m-mobile-show m-right-top ">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!--中间部分-->
    <div class="m-container m-padded-tb-large">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--左边博客内容-->
                <div class="wide column">
                    <!--header-->
                    <div class="ui top attached segment">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <h3 class="ui teal header"> L E A R N </h3>
                            </div>
                            <div class="right aligned column">
                               <i class="icon book large"></i> <h2 class="ui orange header m-inline-block" th:text="${content.title}">14</h2>
                            </div>
                        </div>
                    </div>
                    <!--content-->
                    <div class="ui attached segment">

                        <div class="ui vertical segment">
                            <div class="ui stackable grid mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="header" ><p th:text="${content.title}" >你真的理解什么是财富自由吗？</p></h3>
                                    <p class="m-text" th:utext="|${content.content}|">正确做好任何一件事的前提是清晰，正确的理解目标，
                                        而事实上我们很多人对于目标没有明确的定义，甚至根本就没有目标</p>
                                    <!--作者信息-->
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <i class="user icon"></i>
                                                    <span th:text="${content.creatorName}" >小明</span>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>
                                                    <span th:text="${#dates.format(content.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>
                                                    <span th:text="2342">2342</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <!--点赞-->
                                    <div class="ui grid">
                                        <div class="ui horizontal link list">
                                            <div class="item">
                                                <a href="#" onclick="likeThis(event)"><i class="heart icon"></i></a>
                                                <span id="likeNum" th:text="${likeNum}">20</span>
                                            </div>
                                            <div class="item">
                                                <a th:if="${user != null && answerRecords != null && answerRecords.size > 0}"  class="m-item item m-mobile-hide" th:href="@{/system/front/answerRecord/{contentId}(contentId=${content.contentId})}">
                                                    <i class="book icon"></i>
                                                    已完成答题,查看答题记录
                                                </a>
                                                <a th:if="${user != null && answerRecords != null && answerRecords.size == 0}" th:href="@{/system/front/answer/{contentId}(contentId=${content.contentId})}" target="_blank" class="m-black" >
                                                    <i class="list icon"></i>
                                                    去答题
                                                </a>
                                                <a th:if="${user == null}"  class="m-item item m-mobile-hide" th:href="@{/login}">
                                                    <i class="user icon"></i>
                                                    请登录
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--评论功能-->
                        <div class="ui horizontal link list ">
                            <div class="item">
                                 <textarea name="comment" style="width: 500px;height: 50px">
                            </textarea>
                            </div>
                            <div class="item">
                                <button class="custom-button" id="btn_comment">提交</button>
                            </div>
                        </div>

                        <!--已经产生的评论列表-->
                        <div class="container">
                            <h2><i class="list icon"> </i>用户评论</h2>

                            <!-- 第一个评论 -->
                            <div class="comment" th:each="comment:${comments}">
                                <div class="user-info">
                                    <i class="user icon"></i>
                                    <span class="user-name" th:text="${comment.userName}">张三</span> -
                                    <span class="comment-date" th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd')}">2024-03-07</span>
                                </div>
                                <div class="comment-content" th:text="${comment.commentContent}">
                                    这是一个非常棒的产品，我非常喜欢！
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div id="userData" style="display: none;" th:text="${user}"></div>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<script>
    $(".t_menu").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    })
    $(document).ready(function() {
        $('#btn_comment').click(function() {
            var comment = $('textarea[name="comment"]').val().trim();

            if (comment === '') {
                alert('评论内容不能为空');
                return;
            }
            // 检查用户是否登录
            var userDataElement = document.getElementById('userData');
            console.log("userDataElement.textContent:",userDataElement.textContent)
            if (userDataElement.textContent.trim() === '') {
                console.log('用户未登录：');
                alert("请先登录")
                return;
            }else {
                console.log("用户已登录")
            }
            var formData = new FormData();
            formData.append('commentContent', comment);
            formData.append('contentId',[[${content.contentId}]])
            fetch('/system/comment/add', {
                method: 'POST',
                body: formData
            })
                .then(response => {
                    if (response.ok) {
                       alert('评论提交成功');
                       window.location.reload()
                    } else {
                       alert('评论提交失败');
                    }
                })
                .catch(error => {
                    console.error('发生错误:', error);
                });
        });
    });

    function likeThis(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        // 检查用户是否登录
        var userDataElement = document.getElementById('userData');
        console.log("userDataElement.textContent:",userDataElement.textContent)
        if (userDataElement.textContent.trim() === '') {
            console.log('用户未登录：');
            alert("请先登录")
            return;
        }else {
            console.log("用户已登录")
        }
        var url = '/system/like/add'; // 替换为实际的POST请求地址
        data = JSON.stringify({contentId:[[${content.contentId}]]})

        $.ajax({
            url: url,
            method: "POST",
            data:data,
            contentType: "application/json",
            success: function(data) {
                console.log("数据提交成功",data);
                // 在这里可以根据需要更新页面上的数据或其他操作
                document.getElementById("likeNum").innerText = data.likeNum;

            },
            error: function(xhr, status, error) {
                 console.error("数据提交失败：" + error);
            }
        });
    }

</script>
</html>